<template>
  <nav>
    <div class="nav_l">
      <img src="../assets/img/logo.png" alt="logo">
    </div>
    <div class="nav_c">
      <li>
        <router-link to="/">
          首页
        </router-link>
        <div class="nav_second" >
          <template v-for="(i,index) in shouye" :key="index">
            <li>
              <a href="#">&emsp;{{i.text}}</a>
            </li>
          </template>
        </div>
      </li>
      <!-- 发现 -->
      <li>
        <router-link to="/about">
          发现
          <i class="reddian"></i>
        </router-link>
        <div class="found" @mouseleave="descData">
          <!-- 发现二级导航左边板块 -->
          <div class="found_l">
            <li v-for="(item,index) in found_data" :key="index" :class="{bg:item.isJingxuan}">
              <a href="#" @mouseenter="selectData(index)" @mouseleave="descData2(index)">&emsp;{{item.name}}</a>
            </li>
          </div>
          <!-- 发现二级导航右边板块 -->
          <div class="found_r">
            <!-- 右边上半部分 -->
            <div class="row1">
              <div class="col1">
                <a href="#">
                  <img :src="select_data[0].pic" alt="">&nbsp;&nbsp;
                  <h3>{{select_data[0].name}}</h3>
                </a>
              </div>
              <div class="col2">
                <li>
                  <a href="#">
                    <div>
                      <img src="../assets/img/scj.png" alt="">
                    </div>
                    <p>收藏夹</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div>
                      <img src="../assets/img/sjs.png" alt="">
                    </div>
                    <p>设计师</p>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div>
                      <img src="../assets/img/bd.png" alt="">
                      <i class="reddian" style="margin-left:10px"></i>
                    </div>
                    <p>榜单</p>                   
                  </a>                 
                </li>
              </div>
            </div>
            <!-- 右边下半部分 -->
            <div class="row2">
              <div class="col1">
                <li v-for="(item,index) in select_data[0].data" :key="index">
                  <a href="#">{{item.info}}</a>
                </li>
              </div>
              <div class="col2">
                <li>
                  <a href="#">
                    <img src="../assets/img/found1.jpg" alt="">
                    <span>一学就会的绘本插画风</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="../assets/img/found2.jpg" alt="">
                    <span>轻松制作热点物料</span>
                  </a>
                </li>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li>
        <router-link to="/about">
          共创
        </router-link>
        <div class="nav_second" >
          <template v-for="(i,index) in gongchuang" :key="index">
            <li>
              <a href="#">&emsp;{{i.text}}</a>
            </li>
          </template>
        </div>
      </li>
      <li>
        <router-link to="/about">
          活动
          <i class="reddian"></i>
        </router-link>
        <div class="nav_second" >
          <template v-for="(i,index) in huodong" :key="index">
            <li>
              <a href="#">&emsp;{{i.text}}</a>
              <i class="reddian" v-if="i.isNew"></i>
            </li>
          </template>
        </div>
      </li>
      <li>
        <router-link to="/about">
          正版素材
        </router-link>
        <div class="nav_second" >
          <template v-for="(i,index) in sucai" :key="index">
            <li>
              <a href="#">&emsp;{{i.text}}</a>
            </li>
          </template>
        </div>
      </li>
      <li>
        <router-link to="/about">
          课程
          <svg width="34" height="16" viewBox="0 0 34 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mianxi">
            <path d="M0 8C0 3.58172 3.58172 0 8 0H26C30.4183 0 34 3.58172 34 8V8C34 12.4183 30.4183 16 26 16H0V8Z" fill="#FF4A3B"/>
            <path d="M7.1 5.736V9.12H10.028C9.956 9.288 9.884 9.468 9.8 9.636C9.128 10.788 7.736 11.76 5.648 12.528L6.2 13.212C8.528 12.312 10.028 11.172 10.676 9.78C10.772 9.564 10.868 9.348 10.952 9.12H11.576V11.748C11.576 12.588 11.948 13.008 12.692 13.008H15.044C15.464 13.008 15.764 12.9 15.956 12.684C16.172 12.432 16.316 11.724 16.4 10.572L15.572 10.308C15.536 11.208 15.464 11.748 15.344 11.94C15.248 12.084 15.104 12.168 14.888 12.168H12.956C12.608 12.168 12.44 11.964 12.44 11.568V9.12H15.176V5.484H12.236C12.728 5.052 13.22 4.524 13.724 3.9V3.24H9.584C9.8 2.952 10.004 2.652 10.196 2.34L9.332 2.136C8.36 3.624 7.124 4.812 5.612 5.724L6.164 6.384C6.476 6.18 6.788 5.964 7.1 5.736ZM11.132 5.484H7.424C7.976 5.04 8.48 4.56 8.948 4.032H12.596C12.116 4.584 11.636 5.064 11.132 5.484ZM14.348 8.304H11.192C11.336 7.692 11.408 7.02 11.432 6.288H14.348V8.304ZM10.292 8.304H7.94V6.288H10.568C10.544 7.02 10.448 7.692 10.292 8.304ZM19.292 3.084V8.952H26.804V3.084H22.844C22.988 2.82 23.108 2.544 23.204 2.244L22.304 2.124C22.22 2.46 22.1 2.772 21.932 3.084H19.292ZM25.964 8.208H20.132V7.2H25.964V8.208ZM20.132 6.504V5.52H25.964V6.504H20.132ZM20.132 4.824V3.84H25.964V4.824H20.132ZM18.692 9.768C18.464 10.704 18.092 11.568 17.576 12.336L18.308 12.804C18.824 11.988 19.22 11.04 19.508 9.936L18.692 9.768ZM24.476 13.02C24.932 13.02 25.28 12.924 25.496 12.744C25.736 12.516 25.904 11.904 26 10.896L25.172 10.632C25.124 11.412 25.016 11.88 24.872 12.048C24.776 12.168 24.584 12.24 24.308 12.24H21.644C21.368 12.24 21.236 12.096 21.236 11.82V9.708H20.36V12C20.36 12.672 20.696 13.02 21.392 13.02H24.476ZM22.868 9.276L22.232 9.672C22.856 10.296 23.336 10.86 23.696 11.376L24.356 10.92C24.008 10.452 23.516 9.9 22.868 9.276ZM26.744 9.552L26.072 9.972C26.804 10.92 27.392 11.784 27.824 12.564L28.508 12.084C28.1 11.364 27.512 10.512 26.744 9.552Z" fill="white"/>
          </svg>
        </router-link>
        <div class="nav_second" >
          <template v-for="(i,index) in kecheng" :key="index">
            <li>
              <a href="#">&emsp;{{i.text}}</a>
              <svg v-if="i.isHot" width="42" height="18" viewBox="0 0 42 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="hot">
                <path d="M0 9C0 4.02944 4.02944 0 9 0H33C37.9706 0 42 4.02944 42 9V9C42 13.9706 37.9706 18 33 18H9C4.02944 18 0 13.9706 0 9V9Z" fill="#FF4A3B"/>
                <path d="M8.864 4.432V13H9.848V9.004H14.804V13H15.788V4.432H14.804V8.152H9.848V4.432H8.864ZM21.2447 4.264C19.9487 4.264 18.9407 4.696 18.1967 5.56C17.4887 6.376 17.1407 7.432 17.1407 8.728C17.1407 10.012 17.4887 11.068 18.1967 11.884C18.9407 12.736 19.9487 13.168 21.2327 13.168C22.5167 13.168 23.5367 12.736 24.2807 11.884C24.9767 11.068 25.3367 10.024 25.3367 8.728C25.3367 7.42 24.9767 6.364 24.2807 5.548C23.5367 4.684 22.5167 4.264 21.2447 4.264ZM21.2447 5.14C22.2287 5.14 22.9967 5.464 23.5487 6.124C24.0767 6.772 24.3527 7.636 24.3527 8.728C24.3527 9.808 24.0767 10.66 23.5487 11.308C22.9967 11.956 22.2167 12.292 21.2327 12.292C20.2487 12.292 19.4687 11.956 18.9167 11.284C18.3887 10.636 18.1247 9.784 18.1247 8.728C18.1247 7.66 18.3887 6.808 18.9167 6.16C19.4807 5.476 20.2607 5.14 21.2447 5.14ZM26.0399 4.432V5.284H29.0639V13H30.0359V5.284H33.0599V4.432H26.0399Z" fill="white"/>
              </svg>
            </li>
          </template>
        </div>
      </li>
      <li>
        <router-link to="/about">
          版权保护
        </router-link>
        <div class="nav_second" >
          <template v-for="(i,index) in banquan" :key="index">
            <li>
              <a href="#">&emsp;{{i.text}}</a>
            </li>
          </template>
        </div>
      </li>
      <li>
        <router-link to="/about" class="a_last">
          ···
          <i class="reddian"></i>
        </router-link>
        <div class="nav_second" >
          <template v-for="(i,index) in other" :key="index">
            <li>
              <a href="#">&emsp;{{i.text}}</a>
              <i class="reddian" v-if="i.isNew"></i>
            </li>
          </template>
        </div>
      </li>
    </div>
    <div class="nav_r">
      <div>
        <a href="#" class="search"></a>
      </div>
      <div class="nav_up">
        <a href="#" class="up"></a>
        <div class="up_second">
          <li>
            <a href="#">&emsp;上传作品</a>
          </li>
          <li>
            <a href="#">&emsp;学文章</a>
          </li>
          <li>
            <a href="#">&emsp;我的创作</a>
          </li>
        </div>
      </div>
      <div class="login">
        <li>
          <a href="#">登录</a>
        </li>|
        <li>
          <a href="#">注册</a>
        </li>
        <div class="login_second">
          <a href="#">
            <img src="../assets/img/logined.png" alt="">
            <button>登录</button>
          </a>
        </div>
      </div>
      <div class="openCreate">
        <a href="#">
          开通创作者中心
        </a>
      </div>
    </div>
  </nav>
</template>
<script>
import { reactive }  from 'vue'
export default {
    setup(){
    // 首页二级导航
    let shouye = reactive([
    {text:"站酷首页"},
    {text:"我的首页"}
    ])
    // 共创二级导航
    let gongchuang = reactive([
      {text:"精彩案例"},
      {text:"共创故事"},
      {text:"我要共创"}
    ])
    // 活动二级导航
    let huodong = reactive([
      {text:"设计大赛",isNew:true},
      {text:"专题策划",isNew:false},
      {text:"线上活动",isNew:false},
      {text:"线下活动",isNew:false},
      {text:"互动投票",isNew:false},
      {text:"学习音频",isNew:false}
    ])
    // 正版素材二级导航
    let sucai = reactive([
      {text:"图片"},
      {text:"视频"},
      {text:"字体"},
      {text:"音乐"},
      {text:"模板"},
      {text:"IP"},
      {text:"创意主题"},
      {text:"我要供图"},
    ])
    // 课程二级导航
    let kecheng = reactive([
      {text:"经典好课",isHot:true},
      {text:"平面视觉",isHot:false},
      {text:"绘画插画",isHot:false},
      {text:"电商设计",isHot:false},
      {text:"UI设计",isHot:false},
      {text:"商业摄影",isHot:false},
      {text:"全部课程",isHot:false},
    ])
    //版权保护二级导航
    let banquan = reactive([
      {text:"作品登记"},
      {text:"软件登记"},
      {text:"区块链存证"},
    ])
    // 其他二级导航
    let other = reactive([
      {text:"职位",isNew:false},
      {text:"设计师",isNew:false},
      {text:"榜单",isNew:true},
      {text:"收藏夹",isNew:false},
      {text:"站酷APP",isNew:false},
      {text:"站酷字库",isNew:false},
    ])

    // 发现板块的三级数据
    let found_data = reactive([
      {
        "name":"精选",
        "isJingxuan":true,
        "pic":require("../assets/img/zuanshi.png"),
        "data":[
          {info:"运营设计"},
          {info:"家装设计"},
          {info:"包装"},
          {info:"海报"},
          {info:"动画/影视"},
          {info:"文章"},
          {info:"电商"},
          {info:"商业插画"},
          {info:"App界面"},
          {info:"艺术插画"}
        ]
      },
      {
        "name":"平面",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi2.png"),
        "data":[
          {info:"包装"},
          {info:"品牌"},
          {info:"IP形象"},
          {info:"字体/字形"},
          {info:"Logo"},
          {info:"书籍/画册"},
          {info:"宣传物料"},
          {info:"图案"},
          {info:"信息图表"},
          {info:"PPT/Keynote"},
          {info:"其他平面"},
          {info:"文章"}
        ]
      },
      {
        "name":"插画",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi3.png"),
        "data":[
          {info:"商业插画"},
          {info:"概念设定"},
          {info:"游戏原画"},
          {info:"绘本"},
          {info:"儿童插画"},
          {info:"艺术插画"},
          {info:"创作习作"},
          {info:"新锐潮流插画"},
          {info:"像素画"},
          {info:"文章"}
        ]
      },
      {
        "name":"UI",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi4.png"),
        "data":[
          {info:"APP界面"},
          {info:"游戏UI"},
          {info:"软件界面"},
          {info:"图标"},
          {info:"主题/皮肤"},
          {info:"交互/UE"},
          {info:"动效设计"},
          {info:"闪屏/壁纸"},
          {info:"其他UI"},
          {info:"文章"}
        ]
      },
      {
        "name":"网页",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi5.png"),
        "data":[
          {info:"电商"},
          {info:"企业官网"},
          {info:"游戏/娱乐"},
          {info:"运营设计"},
          {info:"移动端网页"},
          {info:"门户网站"},
          {info:"个人网站"},
          {info:"其他网页"},
          {info:"文章"}
        ]
      },
      {
        "name":"摄影",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi6.png"),
        "data":[
          {info:"人像摄影"},
          {info:"风光摄影"},
          {info:"人文/纪实摄影"},
          {info:"产品摄影"},
          {info:"美食摄影"},
          {info:"环境/建筑摄影"},
          {info:"时尚/艺术摄影"},
          {info:"修图/后期"},
          {info:"宠物摄影"},
          {info:"婚礼摄影"},
          {info:"其他摄影"},
          {info:"文章"}
        ]
      },
      {
        "name":"三维",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi7.png"),
        "data":[
          {info:"动画/影视"},
          {info:"机械/交通"},
          {info:"人物/生物"},
          {info:"产品"},
          {info:"场景"},
          {info:"建筑/空间"},
          {info:"其他三维"},
          {info:"文章"}
        ]
      },
      {
        "name":"影视",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi8.png"),
        "data":[
          {info:"短片"},
          {info:"MotionGraphic"},
          {info:"宣传片"},
          {info:"栏目片头"},
          {info:"MV"},
          {info:"影视后期"},
          {info:"设定/分镜"},
          {info:"其他影视"},
          {info:"文章"}
        ]
      },
      {
        "name":"空间",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi9.png"),
        "data":[
          {info:"家装设计"},
          {info:"酒店餐饮设计"},
          {info:"商业空间设计"},
          {info:"建筑设计"},
          {info:"舞台设计"},
          {info:"展陈设计"},
          {info:"景观设计"},
          {info:"其他空间"}
        ]
      },
      {
        "name":"工业/产品",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi10.png"),
        "data":[
          {info:"生活用品"},
          {info:"电子产品"},
          {info:"交通工具"},
          {info:"工业用品/机械"},
          {info:"人机交互"},
          {info:"玩具"},
          {info:"其他工业/产品"},
          {info:"文章"}
        ]
      },
      {
        "name":"动漫",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi11.png"),
        "data":[
          {info:"短片/格漫"},
          {info:"中/长篇漫画"},
          {info:"网络表情"},
          {info:"单幅漫画"},
          {info:"动画片"},
          {info:"其他动漫"},
          {info:"文章"}
        ]
      },
      {
        "name":"纯艺术",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi12.png"),
        "data":[
          {info:"绘画"},
          {info:"雕塑"},
          {info:"书法"},
          {info:"实验艺术"},
          {info:"文章"}
        ]
      },
      {
        "name":"手工艺",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi13.png"),
        "data":[
          {info:"工艺品设计"},
          {info:"手办/模玩"},
          {info:"首饰设计"},
          {info:"其他手工艺"},
          {info:"文章"}
        ]
      },
      {
        "name":"服装",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi14.png"),
        "data":[
          {info:"休闲/流行服饰"},
          {info:"正装/礼服"},
          {info:"传统/民族服饰"},
          {info:"配饰"},
          {info:"鞋覆设计"},
          {info:"儿童服饰"},
          {info:"其他服装"},
          {info:"文章"}
        ]
      },
      {
        "name":"其他",
        "isJingxuan":false,
        "pic":require("../assets/img/zuanshi15.png"),
        "data":[
          {info:"文案/策划"},
          {info:"VR设计"},
          {info:"独立游戏"},
          {info:"其他"},
          {info:"文章"},
        ]
      },

    ])
    // 选中数据
    let select_data = reactive([
      {
        "name":"精选",
        "isJingxuan":true,
        "pic":require("../assets/img/zuanshi.png"),
        "data":[
          {info:"运营设计"},
          {info:"家装设计"},
          {info:"包装"},
          {info:"海报"},
          {info:"动画/影视"},
          {info:"文章"},
          {info:"电商"},
          {info:"商业插画"},
          {info:"App界面"},
          {info:"艺术插画"}
        ]
      }
    ])
    // 鼠标逻辑
    let selectData = (index)=>{
      found_data.forEach((item)=>{
        item.isJingxuan = false
      })
      found_data[index].isJingxuan = true
      select_data[0] = found_data[index]
    }
    let descData = ()=>{
      found_data.forEach((item)=>{
        item.isJingxuan = false
      })
      found_data[0].isJingxuan = true
      select_data[0] = found_data[0]
    }
    let descData2 = (index)=>{
      found_data.forEach((item)=>{
        item.isJingxuan = false
      })
      found_data[index].isJingxuan = true
      select_data[0] = found_data[index]
    }
    return{
      shouye,
      gongchuang,
      huodong,
      sucai,
      kecheng,
      banquan,
      other,
      found_data,
      select_data,
      selectData,
      descData,
      descData2
    }
  }
    
}
</script>
<style lang="scss" scoped>
.bg{
  background-color: rgb(255, 242, 0);
}
// 导航样式
nav{
  height: 56px;
  background: rgb(255, 242, 0);
  padding: 0 30px;
  line-height: 56px;
  display: flex;
  justify-content: flex-start;
  // 导航左边样式
  .nav_l{
    img{
      margin-top: 16px;
    }
  }
  // 导航中间样式
  .nav_c{
    margin-left: 25%;
    width: 40%;
    display: flex;
    justify-content: space-evenly;
    li{
      position: relative;
      width: 10%;
      a{
        display: block;
        width: 100%;
        height: 56px;
        font-size: 14px;
        font-weight: 500; 
        .reddian{
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: rgb(255, 74, 59);
          position: absolute;
          margin: 0px 0px 2px 3px;
          top: 20px;
        }
        .mianxi{
          position: absolute;
          top: 3px;
          left: 30px;
        }
      }
      .a_last{
        font-size: 20px;
        font-weight: 600;
      }
      a:hover{
        background-color: rgb(40, 40, 40);
        color: rgb(255, 242, 0);
      }
      // 发现
      .found{
        position: absolute;
        width: 780px;
        height: 480px;
        background-color: rgb(255, 255, 255);
        box-shadow:0px 5px 10px 1px rgb(153, 152, 152);
        border-radius:0px 0px 5px 5px;
        z-index: 999;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        display: none;
        // 发现左边板块
        .found_l{
          width: 19%;
          max-height: 470px;
          background-color: rgb(248,248,248);
          padding: 5px 0px;
          overflow: auto;
          &::-webkit-scrollbar{
            width:5px;//对垂直方向滚动条
            // height: 6px;//对水平方向滚动条
          }
          &::-webkit-scrollbar-thumb{
            border-radius:3px;
            background-color: rgb(180, 178, 178)//滚动条的颜色
          }
          li{
            width: 100%;
            a{
              height: 46px;
              line-height: 46px;
              text-align: left;
            }
            a:hover{
              background-color: rgb(255, 242, 0);
              color: black;
            }
          }
        }
        // 发现右边板块
        .found_r{
          z-index: 999;
          width: 81%;
          height: 100%;
          .row1{
            width: 90%;
            height: 80px;
            margin-left: 20px;
            border-bottom: 1px solid rgb(226, 225, 225);
            display: flex;
            justify-content: space-between;
            .col1{
              width: 50%;
              height: 80px;
              a{
                display: block;
                display: flex;
                width: 100%;
                height: 26px;
                line-height: 80px;
                margin-top: 27px;
                img{
                  width: 26px;
                  height: 26px;
                }
                h3{
                  font-size: 20px;
                  line-height: 26px;
                  font-weight: 800;
                }
              }
              a:hover{
                background-color: white;
                color: black;
              }
            }
            .col2{
              width: 50%;
              height: 80px;
              display: flex;
              justify-content: flex-end;
              li{
                width: 20%;
                height: 80px;
                a{
                  div{
                    width: 40px;
                    height: 30px;
                    margin-left: 8px;
                    background-color: rgb(250, 139, 129);
                    border-radius: 50%;
                    line-height: 30px;
                    margin-top: 15px;
                    img{
                      width: 70%;
                      height: 90%;
                    }
                    
                  }
                  p{
                      line-height: 26px;
                      height: 20px;
                      color: rgb(146, 146, 146);
                    }
                }
                a:hover >p{
                  color:rgb(255, 74, 59);
                }
              }
              li:hover a{
                background-color: white;
              }
            }
          }
          .row2{
            width: 90%;
            margin-left: 20px;
            height: 400px;
            display: flex;
            .col1{
              width: 72%;
              height: 400px;
              display: flex;
              flex-direction:column;
              align-items: flex-start;
              flex-wrap: wrap;
              li{
                width: 25%;
                height: 55px;
                line-height: 50px;
                text-align: left;
                a{
                  font-size: 14px;
                }
                a:hover{
                  color: rgb(255, 74, 59);
                  background-color: white;
                }
              }
              li:hover{
                background-color: white;
              }
            }
            .col2{
              width: 28%;
              height: 400px;
              li{
                margin-top: 20px;
                width: 100%;
                height: 140px;
                a{
                  display: block;
                  width: 100%;
                  height: 100%;
                  img{
                    display: block;
                    width: 100%;
                    height: 90%;
                    border-radius: 6px;
                  }
                  span{
                    margin-top: 5px;
                    display: block;
                    width: 100%;
                    height: 10%;
                    font-size: 14px;
                    line-height: 14px;
                    text-align: left;
                  }
                }
              }
              li:hover >a>span{
                color: rgb(255, 74, 59);
              }
              li:hover >a{
                background-color: white;
              }
            }
          }
        }
      }
      // 二级导航样式
      .nav_second{
        display: none;
        position: absolute;
        background-color: rgb(255, 255, 255);
        padding: 5px 0;
        width: 150px;
        box-shadow:0px 5px 10px 1px rgb(153, 152, 152);
        border-radius:0px 0px 5px 5px;
        li{
          width: 100%;
          a{
            height: 46px;
            line-height: 46px;
            text-align: left;
          }
          .reddian{
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgb(255, 74, 59);
            position: absolute;
            top: 13px;
            right: 70px;
          }
          .hot{
            position: absolute;
            top: 13px;
            left: 75px;
          }
        }
        a:hover{
          background-color: rgb(255, 242, 0);
          color: black;
        }
      }
    }
    li:hover >a{
        background-color: rgb(40, 40, 40);
        color: rgb(255, 242, 0);
    }
    li:hover .nav_second{
        display:block;
    }
    li:hover .found{
        display:block;
        display: flex;
    }
  }
  .nav_second{
    z-index: 999;
  }
  // 导航右边样式
  .nav_r{
    margin-left: 15%;
    display: flex;
    font-size: 14px;
    .search{
      display: block;
      width: 60px;
      height: 56px;
      background-image: url(../assets/img/search2.png);
      background-repeat: no-repeat;
      background-size: 50%;
      background-position: center center;
    }
    .search:hover{
      background-color: rgb(40, 40, 40);
      background-image: url(../assets/img/search1.png);
    }
    .nav_up{
      position: relative;
      .up{
        display: block;
        width: 60px;
        height: 56px;
        background-image: url(../assets/img/up2.png);
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: center center;
      }
      .up_second{
        z-index: 999;
        display: none;
        position: absolute;
        background-color: rgb(255, 255, 255);
        padding: 5px 0px;
        width: 150px;
        box-shadow:0px 5px 10px 1px rgb(153, 152, 152);
        border-radius:0px 0px 5px 5px;
        left: -90px;
        li{
          width: 100%;
          a{
            display: block;
            height: 46px;
            line-height: 46px;
            text-align: left;
          }
        }
        a:hover{
          background-color: rgb(255, 242, 0);
          color: black;
        }
      }
      .up:hover{
        background-color: rgb(40, 40, 40);
        background-image: url(../assets/img/up1.png);
      }
    }
    .nav_up:hover >.up_second{
      display: block;
    }
    .login{
      width: 120px;
      height: 56px;
      display: flex;
      text-align: center;
      position: relative;
      li{
        width: 100%;
        height: 100%;
      }
      .login_second{
        display: none;
        position: absolute;
        width: 186px;
        height: 260px;
        z-index: 999;;
        background-color: rgb(255, 255, 255);
        padding: 5px 0px;
        box-shadow:0px 5px 10px 1px rgb(153, 152, 152);
        border-radius:0px 0px 5px 5px;
        top: 56px;
        left: -66px;
        a{
        display: block;
        width: 100%;
        height: 100%;
        img{
          width: 90%;
        }
          button{
            width: 80%;
            height: 35px;
            border-radius: 5px;
            line-height: 35px;
            background-color: rgb(255, 242, 0);
            color: black;
            border: none;
            transform: all 5s;
          }
          button:hover {
            background-color: rgb(253, 182, 68);
          }
        }
      }
    }
    .login:hover >.login_second{
      display: block;
    }
    .login:hover{
      background-color: rgb(40, 40, 40);
      color: rgb(255, 242, 0);
      a{
        color: rgb(255, 242, 0);
      }
      a:hover{
        font-weight: 800;
      }
    }
    .openCreate{
      width: 106px;
      height: 56px;
      margin-left: 5px;
      a{
        display: block;
        width: 102px;
        height: 28px;
        line-height: 30px;
        border: 1px solid rgb(40, 40, 40);
        border-radius: 5px;
        margin-top: 12.5%;
      }
      a:hover{
        background: rgb(40, 40, 40);
        color: rgb(255, 242, 0);
      }
    }
  }
}
</style>